<template>
	<view class="main">
		<wd-form ref="form" :model="model">
			<wd-cell-group border>
				<wd-picker label="诉求对象" v-model="model.value1" prop="value1" @confirm="handleConfirm" :columns="options"
					:rules="[{ required: true, message: '请填写诉求对象' }]" />
				<wd-input label="位置" label-width="100px" prop="value2" clearable v-model="model.value2"
					placeholder="请输入位置信息" :rules="[{ required: true, message: '请填写位置信息' }]" />
				<wd-textarea label="详情信息" v-model="model.value3" prop="value3" placeholder="请填写详情信息" />
			</wd-cell-group>
			<view class="footer">
				<wd-button type="primary" size="medium" @click="handleSubmit" block>提交</wd-button>
			</view>
		</wd-form>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		useToast
	} from '@/uni_modules/wot-design-uni'

	const {
		success: showSuccess
	} = useToast()
	const model = reactive({
		value1: '',
		value2: '',
		value3: '' // 清空默认值，避免混淆
	})
	const form = ref()
	const options = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])

	function handleConfirm({
		value
	}) {
		model.value1 = value // 确认后更新诉求对象的值
	}

	function handleSubmit() {
		form.value
			.validate()
			.then(({
				valid
			}) => {
				if (valid) {
					showSuccess({
						msg: '校验通过'
					})
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}
</script>

<style>
	.main {
		min-height: 100vh;
		background-color: rgb(238, 238, 238);
		padding: 2vw;
	}
</style>